import React, {Component} from 'react';
import {message, Card, Descriptions, Image} from 'antd';
import {movieDetail} from '../../../api/movies';
import '../less/index.less';
import {ArrowLeftOutlined} from "@ant-design/icons";

// 电影详情
export default class MovieDetail extends Component {
  state = {
    res: {},
  }

  backClick = () => {
    this.props.history.goBack();
  }

  getMovie = async (data={}) => {
    try {
      const id = this.props.match.params.id;
      const {data: res} = await movieDetail(id);
      this.setState({res});
    } catch (e) {
      message.error(e.data.name || e.data.message);
    }
  }

  componentDidMount() {
    this.getMovie();
  }

  render() {
    const {res} = this.state;
    const title = (
      <span>
        <ArrowLeftOutlined style={{cursor: 'pointer'}} onClick={this.backClick}/>
        <h1 className='detail-title'>
          电影详情页
        </h1>
      </span>
    )
    return (
      Object.keys(res).length > 0 ?
      <Card title={title}>
        <Descriptions column={1} bordered>
          <Descriptions.Item label="电影名">{res.movie_name}</Descriptions.Item>
          <Descriptions.Item label="发行日期">{res.datePublished}</Descriptions.Item>
          <Descriptions.Item label="出品地区">{res.region}</Descriptions.Item>
          <Descriptions.Item label="语言">{res.language}</Descriptions.Item>
          <Descriptions.Item label="影片分类">{res.classify.indexOf('TV') !== -1 ? '电视剧' : '电影'}</Descriptions.Item>
          <Descriptions.Item label="评分">{res.aggregateRating.ratingValue}</Descriptions.Item>
          <Descriptions.Item label="时长">{res.runtime}</Descriptions.Item>
          <Descriptions.Item label="影片类型">{res.genre.join('/')}</Descriptions.Item>
          <Descriptions.Item label="影片标签">{res.tags.join('/')}</Descriptions.Item>
          <Descriptions.Item label="描述">{res.description}</Descriptions.Item>
          <Descriptions.Item label="海报">{<Image src={res.image} width={100}/>}</Descriptions.Item>
          <Descriptions.Item label="演职人员" contentStyle={{display: 'flex', alignItems: 'center'}} labelStyle={{}}>
            {
              res.celebrities.map(i => {
                return (
                  <div className='celebrity' key={i.celebrity_id}>
                    <Image src={i.avatar} width={80}/>
                    <a href={'https://movie.douban.com/celebrity/'+i.celebrity_id} target='_blank' rel="noopener noreferrer">{i.name}</a>
                    <p>{i.role}</p>
                  </div>
                )
              })
            }
          </Descriptions.Item>
          <Descriptions.Item label="豆瓣链接">
            {
              <a href={'https://movie.douban.com/subject/' + res._id} target='_blank' rel="noopener noreferrer">
                {res.movie_name}
              </a>
            }
          </Descriptions.Item>
        </Descriptions>
      </Card> : null
    )
  }
}
